<script setup>
import { onMounted, ref, watch } from "vue";
import { educationConfig } from "@/utils/appData.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});

watch(
  () => props.info,
  (newVal) => {
    // 回填教育信息
    if (props.info.educations) {
      education.value = props.info.educations;
    }
  }
);

const disabledDate = (time) => {
  return time.getTime() > Date.now() - 8.64e7;
};

const education = ref([]);
const selectList = ref(0);
onMounted(() => {
  selectList.value = 1;
  for (let i = 0; i < selectList.value; i++) {
    education.value.push({
      type: "",
      schoolName: "",
      graduateTime: "",
      fullTime: "",
    });
  }
});

const handleAddEducation = () => {
  const lastIndex = education.value.length - 1;
  const lastItem = education.value[lastIndex];

  // 检查最后一行是否填写完整
  if (
    !lastItem.type ||
    !lastItem.schoolName ||
    !lastItem.graduateTime ||
    lastItem.fullTime === ""
  ) {
    ElMessage.warning("请先完善当前教育信息");
    return;
  }

  // 限制最多5个
  if (education.value.length >= 5) {
    ElMessage.warning("最多只能添加5个教育背景");
    return;
  }

  // 添加新的一行

  education.value.push({
    type: "",
    schoolName: "",
    graduateTime: "",
    fullTime: "",
  });
  selectList.value++;
};

// 删除教育背景
const handleDeleteEducation = (index) => {
  education.value.splice(index, 1);
  selectList.value--;
};

defineExpose({ education });
</script>

<template>
  <div class="form">
    <h4 class="title"><span></span> 教育背景</h4>
    <p class="tips">
      <b><i>*</i> 教育信息</b> <span class="ru">让买家更加信任你</span>
    </p>
    <div class="list">
      <div class="item" v-for="(item, index) in selectList" :key="item">
        <el-select
          placeholder="学历"
          v-model="education[index]['type']"
          style="width: 138px; margin-right: 16px"
        >
          <el-option
            v-for="item in educationConfig"
            :key="item"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          v-model="education[index].schoolName"
          placeholder="学校名称"
          style="width: 210px; margin-right: 16px"
          :maxlength="50"
          show-word-limit
        ></el-input>
        <el-date-picker
          style="margin-right: 16px"
          v-model="education[index].graduateTime"
          type="year"
          :disabled-date="disabledDate"
          value-format="YYYY"
          placeholder="毕业年份"
        />
        <el-select
          placeholder="是否全日制"
          v-model="education[index].fullTime"
          style="width: 130px"
        >
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
        <span v-if="item > 1" class="del" @click="handleDeleteEducation(index)"
          ><img src="@/assets/del-icon.png" alt=""
        /></span>
      </div>
    </div>
    <p class="add" @click="handleAddEducation">+ 添加教育背景</p>
  </div>
</template>

<style scoped lang="scss">
.form {
  width: 1200px;
  margin: 0 auto 20px;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px;
  box-sizing: border-box;
  .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 20px;
    span {
      width: 2px;
      height: 12px;
      background: #1dbf73;
      border-radius: 10px 10px 10px 10px;
      margin-right: 6px;
    }
  }
}
.tips {
  b {
    color: #191e28;
    i {
      color: #ff4f4f;
    }
  }
  .ru {
    margin: 0 8px;
    color: rgba(25, 30, 40, 0.36);
    font-size: 12px;
  }
  .rj {
    color: #008571;
    font-size: 12px;
  }
}
.item {
  display: flex;
  align-items: center;
  margin-top: 12px;
  .del {
    margin-left: 12px;
    cursor: pointer;
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.add {
  color: #008571;
  font-weight: bold;
  margin-top: 16px;
}
</style>

<style>
.el-select .el-select__wrapper {
  height: 51px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  box-shadow: none;
}
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
  height: 51px;
}
</style>